import menuApi from "@/api/menuApi";
import dateTime from "@/utils/dateutils";
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {EIcon, EIconPicker,} from 'e-icon-picker';
export default {
    name: "index",
    // register the component
    components: {Treeselect, EIconPicker, EIcon},
    data() {
        return {
            pickerOptions: dateTime.pickerOptions,
            value2: dateTime.value2,
            searchForm: {
                currentPage: 1,
                pageSize: 5,
            },
            tableData: [],
            total: 0,
            editDialog: false,
            formData: {
                menuType: 0,
                parentId: 0
            },
            ids: [],
            parentList: [
                {
                    id: 0,
                    menuTitle: "主目录",
                    children: []
                }
            ],

            highLightColor: "#fc1944",
            options: {FontAwesome: true, ElementUI: true},
            zIndex:3500,
            //表单校验的独享
            formRules: {
                parentId: [
                    {required: true, message: '请选择上级菜单', trigger: 'blur'},
                ],
                menuType: [
                    {required: true, message: '请选择菜单类型', trigger: 'blur'},
                ],
                menuIcon: [
                    {required: true, message: '请选择菜单图标', trigger: 'change'},
                ],
                menuTitle: [
                    {required: true, message: '请输入权限名称', trigger: 'blur'},
                ],
                sort: [
                    {required: true, message: '请添加排序', trigger: 'blur'},
                ],

                routerPath: [
                    {required: true, message: '请输入路由地址', trigger: 'blur'},
                ],

                component: [
                    {required: true, message: '请输入组件地址', trigger: 'blur'},
                ],

                permSign: [
                    {required: true, message: '请添加权限标识', trigger: 'blur'},
                ],
            },
            normalizer(node) {
                if (!node.children) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.menuTitle,
                    children: node.children,
                }
            },
        }
    },
    created() {
        this.searchPage();

    },

    methods: {
        //////////////////////业务逻辑的方法//////////////////
        /*分页条件查询*/
        async searchPage() {
            let result = await menuApi.searchPage(this.searchForm);
            console.log(result)
            this.tableData = result.data;
            this.total = result.total;
            this.ids = [];
            this.getParentTree();
        },


        /*添加或者修改品牌*/
        addOrEdit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.formData.id) {
                        await menuApi.updateMenu(this.formData);
                    } else {
                        await menuApi.addMenu(this.formData);
                    }
                    this.searchPage();
                    this.editDialog = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        },

        /*删除品牌*/
        async batchDelete() {
            await menuApi.batchDelete(this.ids);
            this.searchPage();
        },

        /**通过id查询*/
        async findById(id) {
            this.formData = await menuApi.findById(id);
        },

        //获得添加时的上级菜单列表

        async getParentTree() {
            this.parentList[0].children = await menuApi.getParentTree();

        },


        //////////////////////处理页面效果////////////////////////////
        chooseTime(value) {
            this.searchForm.startTime = value[0],
                this.searchForm.endTime = value[1]
        },


        /*点击分页效果*/
        pageChangeHandler(page) {
            this.searchForm.currentPage = page;
            this.searchPage();
        },
        /*重置查询表单*/
        resetSearchForm() {
            this.searchForm = {
                currentPage: 1,
                pageSize: 5,
            };

            this.value2 = [];
        },
        /*点击列表中的点击删除*/
        itemBtnClick(row) {
            this.ids = [];
            this.ids.push(row.id);
        },
        /*勾选框发生改变*/
        selectChange(row) {
            console.log(row)
            this.ids = [];
            this.ids.push(row.id)
        },
        /*点击批量删除*/
        doBatchDelete() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //做删除的功能
                this.batchDelete();
            }).catch(() => {
                this.ids = []
            });
        },

        /**
         * 取消删除
         */
        batchDeleteCancel() {
            this.ids = []
        }
    }
}
